<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Using CloudMade Tiles with OpenLayers</title>
	<link rel="stylesheet" href="js/openlayers/theme/default/style.css" type="text/css" />
</head>
<body>	
	<div id="map" style="width: 600px; height: 600px;"></div>
	
	<script type="text/javascript" src="js/openlayers/OpenLayers.js"></script>
	<script type="text/javascript" src="js/cloudmade.js"></script>
	
	<script type="text/javascript">
		var map = new OpenLayers.Map("map", {
	      controls: [
	         new OpenLayers.Control.Navigation(),
	         new OpenLayers.Control.PanZoomBar(),
	         new OpenLayers.Control.ScaleLine(),
			 new OpenLayers.Control.Attribution()
	      ]
	    });
		
		var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
			key: '4f492e496b9d4cfb9a5ca73cd8fd94b1',
			styleId: 38062
			//key: 'BC9A493B41014CAABB98F0471D759707'
		});
		map.addLayer(cloudmade);

		var epsg4326 = new OpenLayers.Projection("EPSG:4326");
		var center = new OpenLayers.LonLat(-0.137, 51.514).transform(epsg4326, map.getProjectionObject());
		map.setCenter(center, 5);
	</script>
</body>
</html>